<template>
  <div>
    <div id="chart-container" style="width: 500px; height: 300px;"></div>
    <div id="chart-container-pie" style="width: 500px; height: 300px;"></div>
    <div id="chart-container-gender" style="width: 500px; height: 300px;"></div>
    <div id="chart-container-employ" style="width: 500px; height: 300px;"></div>
<!--    <div id="chart-container-time" style="width: 1230px; height: 350px;"></div>-->
  </div>

</template>

<script>
import * as echarts from 'echarts'
import axios from "axios";

// 投递职位柱形图
export default {
  data() {
    return {
      chartData: [],
      chartDataPie:[],
      chartDataGender:[],
      chartDataEmploy:[],
      chartDataTime:[]
    };
  },
  mounted() {
    this.fetchChartData();
    this.fetchChartDataPie();
    this.fetchChartDataGender();
    this.fetchChartDataEmploy();
    this.fetchChartDataTime();
  },
  methods: {
    fetchChartData() {
      axios.get(BASE_URL + '/v1/data/user')
          .then(response => {
            console.log(response.data.data);
            this.chartData = response.data.data;
            console.log(this.chartData);
            this.initChart();
          })
          .catch(error => {
            console.error('Error fetching chart data:', error);
            // 可以在这里处理错误，比如显示错误消息
          });
    },

    fetchChartDataPie(){
      axios.get(BASE_URL + '/v1/data/identity')
          .then(response => {
            console.log(response.data.data);
            this.chartDataPie = response.data.data.map(item => ({
              value: item.count,
              name: item.identityId
            }));
            console.log(this.chartDataPie);
            this.initChartPie();
          })
          .catch(error => {
            console.error('Error fetching chart data:', error);
            // 可以在这里处理错误，比如显示错误消息
          });
    },

    fetchChartDataGender(){
      axios.get(BASE_URL + '/v1/data/gender')
          .then(response => {
            console.log(response.data.data);
            this.chartDataGender = response.data.data.map(item => ({
              value: item.count,
              name: item.gender
            }));
            console.log(this.chartDataGender);
            this.initChartGender();
          })
          .catch(error => {
            console.error('Error fetching chart data:', error);
            // 可以在这里处理错误，比如显示错误消息
          });
    },

    fetchChartDataEmploy(){
      axios.get(BASE_URL + '/v1/data/employ')
          .then(response => {
            console.log(response.data.data);
            this.chartDataEmploy = response.data.data.map(item => ({
              value: item.count,
              name: item.employmentType
            }));
            console.log(this.chartDataEmploy);
            this.initChartEmploy();
          })
          .catch(error => {
            console.error('Error fetching chart data:', error);
            // 可以在这里处理错误，比如显示错误消息
          });
    },

    fetchChartDataTime() {
      axios.get(BASE_URL + '/v1/data/time')
          .then(response => {
            console.log(response.data.data);
            this.chartDataTime = response.data.data.map(item => ({
              value: item.count,
              name: item.createTime
            }));
            console.log(this.chartDataTime);
            this.initChartTime();
          })
          .catch(error => {
            console.error('Error fetching chart data:', error);
            // 可以在这里处理错误，比如显示错误消息
          });
    },

    initChart() {
      // 获取图表容器
      let chartContainer = document.getElementById('chart-container');

      // 确保容器存在
      if (!chartContainer) {
        return;
      }

      // 初始化Echarts实例
      let myChart = echarts.init(chartContainer);

      // 配置图表选项
      let option = {
        title: {
          text: '用户状态',
          top: 10,
          left: 'center',
          textStyle: {
            color: '#5B63B7',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: '宋体',
            fontSize: 20
          }
        },
        xAxis: {
          data: ['正常', '注销', '禁言']
        },
        yAxis: {},
        series: [{
          type: 'bar',
          data: this.chartData,
          color: ['#9296F0']
        }]
      };

      // 使用setOption方法设置图表
      myChart.setOption(option);
    },

    initChartPie() {
      // 获取图表容器
      let chartContainerPie = document.getElementById('chart-container-pie');

      // 确保容器存在
      if (!chartContainerPie) {
        return;
      }

      // 初始化Echarts实例
      let myChartPie = echarts.init(chartContainerPie);

      let optionPie = {
        title: {
          text: '用户身份',
          top: 10,
          left: 'center',
          textStyle: {
            color: '#5B63B7',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: '宋体',
            fontSize: 20
          }
        },
        series:[
          {
            top:20,
            type:'pie',
            data:this.chartDataPie,
            radius:['30%','60%'],
            color: ['#9296F0','#5B63B7']
          }
        ],
      };

      // 使用setOption方法设置图表
      myChartPie.setOption(optionPie);
    },

    initChartGender() {
      // 获取图表容器
      let chartContainerGender = document.getElementById('chart-container-gender');

      // 确保容器存在
      if (!chartContainerGender) {
        return;
      }

      // 初始化Echarts实例
      let myChartGender = echarts.init(chartContainerGender);

      let optionGender = {
        title: {
          text: '用户性别',
          top: 10,
          left: 'center',
          textStyle: {
            color: '#5B63B7',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: '宋体',
            fontSize: 20
          }
        },
        series:[
          {
            top:20,
            type:'pie',
            // roseType:'area',
            data:this.chartDataGender,
            radius:['0','60%'],
            color: ['#9296F0','#5B63B7']
          }
        ],
      };

      // 使用setOption方法设置图表
      myChartGender.setOption(optionGender);
    },

    initChartEmploy() {
      // 获取图表容器
      let chartContainerEmploy = document.getElementById('chart-container-employ');

      // 确保容器存在
      if (!chartContainerEmploy) {
        return;
      }

      // 初始化Echarts实例
      let myChartEmploy = echarts.init(chartContainerEmploy);

      let optionEmploy = {
        title: {
          text: '雇佣类型',
          top: 10,
          left: 'center',
          textStyle: {
            color: '#5B63B7',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: '宋体',
            fontSize: 20
          }
        },
        series:[
          {
            top:20,
            type:'pie',
            roseType:'area',
            data:this.chartDataEmploy,
            radius:['0','60%'],
          }
        ],
      };

      // 使用setOption方法设置图表
      myChartEmploy.setOption(optionEmploy);
    },

    initChartTime() {
      // 获取图表容器
      let chartContainerTime = document.getElementById('chart-container-time');

      // 确保容器存在
      if (!chartContainerTime) {
        return;
      }

      // 初始化Echarts实例
      let myChartTime = echarts.init(chartContainerTime);

      let optionTime = {
        title: {
          text: '用户创建时间',
          top: 10,
          left: 'center',
          textStyle: {
            color: '#5B63B7',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: '宋体',
            fontSize: 20
          }
        },
        xAxis: {
          data: this.chartDataTime.map(item => item.name),
        },
        yAxis: {},
        series: [
          {
            data: this.chartDataTime.map(item => item.value),
            type: 'line',
            color: ['#9296F0'],
            label:{
              show:true,
            }
          }
        ]
      };

      // 使用setOption方法设置图表
      myChartTime.setOption(optionTime);
    },

  },

};

</script>

<style>
/* 用户状态柱形图 */
#chart-container {
  margin: 20px;
  background-color:#f5f5f5;
  border-radius: 5px;
  display: inline-block;
}
/*用户身份*/
#chart-container-pie {
  margin: 20px;
  background-color:#f5f5f5;
  border-radius: 5px;
  display: inline-block
}
/*用户性别*/
#chart-container-gender {
  margin: 20px;
  background-color:#f5f5f5;
  border-radius: 5px;
  display: inline-block
}
/*雇佣类型*/
#chart-container-employ {
  margin: 20px;
  background-color:#f5f5f5;
  border-radius: 5px;
  display: inline-block
}
/*创建时间*/
#chart-container-time {
  margin: 20px;
  background-color:#f5f5f5;
  border-radius: 5px;
  display: inline-block
}
</style>

